/*.page-1{ background-color:#083846;}
.page-2{ background-color:#9261BF;}
.page-3{ background-color:#F3533C;}
.page-4{ background-color:#FFBF50;}*/
#page-content { }
.page,.startpages{
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	transform-origin: center bottom; 
	 -webkit-transform-origin: center bottom; 
	 -moz-transform-origin: center bottom; 
	 -o-transform-origin: center bottom; 
	 
}
.startpages { z-index:999}
.page-1{ background-image: url(../img/homebg.jpg);} 

.share{
	display: none;
	position: absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background:url(../img/share.png) no-repeat center;
	background-size: cover;
	z-index: 9999;
}
.btn-group{
  position: absolute;
  top:40%;
  text-align: center;
  width:50%;
  margin:0 auto; left:0; right:0
}
.btn-group a{
  display: inline-block;
  margin-left: -20px;
}
.btn-group a img{
  width: 160px;
  height: auto;
}

/* loading */
#loading{
	display:block;
	position:absolute;
	left:0; 
	top:0;
	width: 100%;
	height: 100%;
	color:white;
	background: #5fc4d6;
	font-size: 1em;
	text-align: center;
	overflow:hidden;
	z-index: 9999;
}

.spinner {
  margin: 0 auto;
  width: 60px;
  height: 60px;
  position: relative;
  top:40%;
}
 
.container1 > div, .container2 > div, .container3 > div {
  width: 15px;
  height: 15px;
  background-color: #fff;
  border-radius: 100%;
  position: absolute;
  -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
  animation: bouncedelay 1.2s infinite ease-in-out;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
 
.spinner .spinner-container {
  position: absolute;
  width: 100%;
  height: 100%;
}
 
.container2 {
  -webkit-transform: rotateZ(45deg);
  transform: rotateZ(45deg);
}
 
.container3 {
  -webkit-transform: rotateZ(90deg);
  transform: rotateZ(90deg);
}
 
.circle1 { top: 0; left: 0; }
.circle2 { top: 0; right: 0; }
.circle3 { right: 0; bottom: 0; }
.circle4 { left: 0; bottom: 0; }
 
.container2 .circle1 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}
 
.container3 .circle1 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}
 
.container1 .circle2 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
 
.container2 .circle2 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
 
.container3 .circle2 {
  -webkit-animation-delay: -0.7s;
  animation-delay: -0.7s;
}
 
.container1 .circle3 {
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s;
}
 
.container2 .circle3 {
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s;
}
 
.container3 .circle3 {
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s;
}
 
.container1 .circle4 {
  -webkit-animation-delay: -0.3s;
  animation-delay: -0.3s;
}
 
.container2 .circle4 {
  -webkit-animation-delay: -0.2s;
  animation-delay: -0.2s;
}
 
.container3 .circle4 {
  -webkit-animation-delay: -0.1s;
  animation-delay: -0.1s;
}
/*JS定义页面大小*/
.arealayer { position:relative; width:100%; height:100%; margin:0 auto}


.home {position:absolute; left:0; right:0; background-position:0 0; background-repeat:no-repeat; background-size:100%;   margin:0 auto; text-align:center; width:100%; height: auto; z-index:10}
.home1 { z-index:11; top:5%}
.home2 { z-index:12; top:6%}
.home3 { z-index:13; width:60%; top:20%}
.home4 { z-index:14;width:50%; bottom:60px;}
.home5 { z-index:14; width:60%;bottom:10px;}
.home6 { z-index:16; width:20px;height:30px; left:80%; right:auto;bottom:60px;  }
.home7 { z-index:14; width:80px;height:60px;  bottom:45px; background: url(../img/arrow.png) left top no-repeat;opacity:0.5; background-size:100% }
.home8 { z-index:14; width:99px;height:22px;  bottom:120px; background: url(../img/ren.png) left top no-repeat;  background-size:100% }

.a-name,.a-build,.a-map,.a-taps,.floatlayerbg,.floatlayer,.paihang{ position:absolute; left:0; right:0; background-position:0 0; background-repeat:no-repeat; background-size:100%;   margin:0 auto; text-align:center; width:100%; height:100%}
.shutdiv,.shareshutdiv { position:absolute; right:20px; top:20px; z-index:1001; width:40px; height:40px; background:url(../img/shut.png) 0 0 no-repeat; background-size:100%;}
.shareshutdiv {background:url(../img/end/share.png) 0 0 no-repeat; background-size:cover; width:20px; height:20px;}
.floatlayerbg,.floatlayer,.shutdiv,.paihang{ display:none}
.floatlayerbg,.floatlayer { z-index:999}
.floatlayerbg { background-size:cover}
.floatlayer { overflow:scroll; height: auto}
.floatlayer img { margin:0; padding:0; display:block}
.paihang { background-image: url(../img/homebg.jpg); background-size: cover; z-index:933}
.paihang .paitop,.paihang .pailist,.paihang .text { position:absolute; left:0; right:0;background-position:0 0; background-repeat:no-repeat; background-size:100%;   margin:0 auto; }
.paihang .paitop { background:url(../img/list/top.png) top left no-repeat; background-size: 100%; width:70%; height:200px; z-index:21; left:0%; top:3%; right:auto}
.paihang .text { background:url(../img/list/text.png) top left no-repeat; background-size: 100%; width:70%; bottom:0%; height:80px; z-index:21; }
.paihang .pailist { width:80%; margin:0 auto; z-index:23; height:290px; top:130px; text-align: left}
.paihang .pailist ul { margin:0; padding:0; position:relative}
.paihang .pailist li { height:50px; clear:both; float:none; margin-bottom:10px; position:relative}
.paihang .pailist li:first-child .headicon { background:url(../img/list/no1float.png) left top no-repeat; background-size:cover; height:30px; width:30px; position:absolute; left:-10px; top:-10px; z-index:99}
.paihang .pailist .licon { width:50px; height:50px; overflow:hidden; background-repeat:no-repeat; background-size:cover; float:left; position:absolute; left:0px; top:0px; z-index:23}
.paihang .pailist .rcont { margin-left:60px; margin-right:0px; color:#fff; font-size:14px;}
.paihang .pailist .rcont .lie { height:18px; margin-top:2px;}
.paihang .pailist .rcont .lie .pre{ display:block; background:RGB(109,207,246); width:60%; height:20px; float:left; margin-right:5px;}


.a-name {top:3%;width:115px; height:33px; z-index:99}
.area-hb .a-name {background-image:url(../img/hb/name.png);}
.area-db .a-name {background-image:url(../img/db/name.png);}
.area-hd .a-name {background-image:url(../img/hd/name.png);}
.area-hz .a-name {background-image:url(../img/hz/name.png);}
.area-hn .a-name {background-image:url(../img/hn/name.png);}
.area-xn .a-name {background-image:url(../img/xn/name.png);}
.area-xb .a-name {background-image:url(../img/xb/name.png);}
.area-ga .a-name {background-image:url(../img/ga/name.png);width: 60px;}


.a-map {top:25%;width:100%; height:300px; z-index:10; background-size:100%}
.area-hb .a-map {background-image:url(../img/hb/map.png);}
.area-db .a-map {background-image:url(../img/db/map.png); width:80%; top:30%}
.area-hd .a-map {background-image:url(../img/hd/map.png); width:45%}
.area-hz .a-map {background-image:url(../img/hz/map.png);width:60%}
.area-hn .a-map {background-image:url(../img/hn/map.png);}
.area-xn .a-map {background-image:url(../img/xn/map.png);}
.area-xb .a-map {background-image:url(../img/xb/map.png);}
.area-ga .a-map {background-image:url(../img/ga/map.png);}

.a-map .maptip { width:40px; height:33px; background:url(../img/maptip.png) 0 0 no-repeat; background-size:100%; display:block; position:absolute; z-index:11; top:2%; left:10%;opacity:0 }
.area-hb .a-map .t1 { left:61%; top:39%}	
.area-hb .a-map .t2 { left:64%; top:42%}	
.area-hb .a-map .t3 {left:60%; top:50%}	
.area-hb .a-map .t4 { left:50%; top:50%}	
.area-hb .a-map .t5 {  left:60%; top:22%}

.area-db .a-map .t1 { left:60%; top:12%}	
.area-db .a-map .t2 { left:50%; top:25%}	
.area-db .a-map .t3 { left:30%; top:35%}

.area-hd .a-map .t1 { left:70%; top:25%}	
.area-hd .a-map .t2 {left:52%; top:20% }	
.area-hd .a-map .t3 { left:50%; top:38%}	
.area-hd .a-map .t4 {left:32%; top:25% }	
.area-hd .a-map .t5 { left:30%; top:45%}
.area-hd .a-map .t6 {left:10%; top:40%}
.area-hd .a-map .t7 {left:50%; top:0%}
.area-hn .a-map .t1 { left:60%; top:22%}	
.area-hn .a-map .t2 { left:30%; top:20%}	
.area-hn .a-map .t3 { left:40%; top:60%}

.area-hz .a-map .t1 { left:60%; top:0%}	
.area-hz .a-map .t2 { left:50%; top:20%}	
.area-hz .a-map .t3 { left:40%; top:51%}
.area-xn .a-map .t1 { left:85%; top:15%}	
.area-xn .a-map .t2 { left:65%; top:15%}	
.area-xn .a-map .t3 {left:85%; top:30%}	
.area-xn .a-map .t4 { left:65%; top:40%}	
.area-xn .a-map .t5 { left:20%; top:10%}
.area-xb .a-map .t1 { left:90%; top:50%}	
.area-xb .a-map .t2 { left:62%; top:29%}	
.area-xb .a-map .t3 {left:52%; top:50%}	
.area-xb .a-map .t4 { left:85%; top:40%}	
.area-xb .a-map .t5 { left:30%; top:20%}
.area-ga .a-map .t1 { left:55%; top:50%}	
.area-ga .a-map .t2 { left:45%; top:50%}	

	

.a-build .js{top:9%;width:60%; height:100px; z-index:3; background-size:100%; background-repeat:no-repeat; position:absolute; left:0; right:0; margin:0 auto; text-align:center;opacity:0}
.area-hb .a-build  .js{ background-image: url(../img/hb/c1.png)}
.area-db .a-build  .js1{width:90%;top:16%; background-image: url(../img/db/c1.png)}
.area-db .a-build  .js2{width:90%;top:16%; background-image: url(../img/db/c2.png)}	
.area-hd .a-build  .js1{width:60%;top:10%; background-image: url(../img/hd/c1.png)}
.area-hd .a-build  .js2{width:30px;top:12%; left: auto; right:7%; background-image: url(../img/hd/c2.png)}	
.area-hd .a-build  .js3{width:30px;top:12%; right:auto; left:7%; background-image: url(../img/hd/c3.png)}	
.area-hz .a-build  .js1{width:100%;top:19%; background-image: url(../img/hz/c1.png)}
.area-hz .a-build  .js2{width:100%;top:14%; background-image: url(../img/hz/c2.png)}		
.area-hn .a-build  .js1{width:70%;top:10%; background-image: url(../img/hn/c1.png)}
.area-hn .a-build  .js2{width:20%;top:12%; background-image: url(../img/hn/c2.png)}		
.area-xn .a-build  .js1{width:100%;top:13%; background-image: url(../img/xn/c1.png)}
.area-ga .a-build  .js1{width:60%;top:8%; background-image: url(../img/ga/c1.png)}
.area-ga .a-build  .js2{width:30px;top:4%; left:5%; right:auto; background-image: url(../img/ga/c2.png)}		
.pageend .a-build  .js1{width:100%;top:9%; background-image: url(../img/end/c1.png); height:150px;}		
.area-xb .a-build  .js1{width:100%;top:14%; background-image: url(../img/xb/c1.png)}
.area-xb .a-build  .js2{width:100%;top:18%; background-image: url(../img/xb/c2.png)}	

.a-taps { top:65%; height:auto}
.a-taps ul { position:relative}
.a-taps .col5 {}
.a-taps li { position:absolute; display:block;width:52px; height:80px; background-repeat:no-repeat; background-size:100%;}
.a-taps .col5.c1 {top:0%; left:10%; z-index:21}
.a-taps .col5.c2 {top:0%;  left:40%; z-index:22}
.a-taps .col5.c3 {top:0%;  left:70%; z-index:23}
.a-taps .col5.c4 {top:90px; left:25%;  z-index:24}
.a-taps .col5.c5 { top:90px; left:55%;  z-index:25}
.a-taps .col2.c1 {top:40px; left:30%; z-index:21}
.a-taps .col2.c2 {top:40px;  left:60%; z-index:22}
.a-taps .col3.c1 {top:40px; left:10%; z-index:21}
.a-taps .col3.c2 {top:40px;  left:40%; z-index:22}
.a-taps .col3.c3 {top:40px;  left:70%; z-index:23}
.a-taps .col7.c1 {top:0%; left:5%; z-index:21}
.a-taps .col7.c2 {top:0%;  left:29%; z-index:22}
.a-taps .col7.c3 {top:0%;  left:55%; z-index:23}
.a-taps .col7.c4 {top:0%; left:80%;  z-index:24}
.a-taps .col7.c5 { top:90px; left:17%;  z-index:25}
.a-taps .col7.c6 { top:90px; left:45%;  z-index:26}
.a-taps .col7.c7 { top:90px; left:70%;  z-index:27}
.area-hb .a-taps .col5.c1 {background-image:url(../img/hb/n1.png);}
.area-hb .a-taps .col5.c2 {background-image:url(../img/hb/n2.png); }
.area-hb .a-taps .col5.c3 {background-image:url(../img/hb/n3.png);}
.area-hb .a-taps .col5.c4 {background-image:url(../img/hb/n4.png);}
.area-hb .a-taps .col5.c5 {background-image:url(../img/hb/n5.png);}
.area-db .a-taps .col3.c1 {background-image:url(../img/db/n1.png);}
.area-db .a-taps .col3.c2 {background-image:url(../img/db/n2.png); }
.area-db .a-taps .col3.c3 {background-image:url(../img/db/n3.png);}
.area-hd .a-taps .col7.c1 {background-image:url(../img/hd/n1.png);}
.area-hd .a-taps .col7.c2 {background-image:url(../img/hd/n2.png); }
.area-hd .a-taps .col7.c3 {background-image:url(../img/hd/n3.png);}
.area-hd .a-taps .col7.c4 {background-image:url(../img/hd/n4.png);}
.area-hd .a-taps .col7.c5 {background-image:url(../img/hd/n5.png); }
.area-hd .a-taps .col7.c6 {background-image:url(../img/hd/n6.png);}
.area-hd .a-taps .col7.c7 {background-image:url(../img/hd/n7.png);}
.area-hz .a-taps .col3.c1 {background-image:url(../img/hz/n1.png);}
.area-hz .a-taps .col3.c2 {background-image:url(../img/hz/n2.png); }
.area-hz .a-taps .col3.c3 {background-image:url(../img/hz/n3.png);}
.area-hn .a-taps .col3.c1 {background-image:url(../img/hn/n1.png);}
.area-hn .a-taps .col3.c2 {background-image:url(../img/hn/n2.png); }
.area-hn .a-taps .col3.c3 {background-image:url(../img/hn/n3.png);}
.area-xn .a-taps .col5.c1 {background-image:url(../img/xn/n1.png);}
.area-xn .a-taps .col5.c2 {background-image:url(../img/xn/n2.png); }
.area-xn .a-taps .col5.c3 {background-image:url(../img/xn/n3.png);}
.area-xn .a-taps .col5.c4 {background-image:url(../img/xn/n4.png);}
.area-xn .a-taps .col5.c5 {background-image:url(../img/xn/n5.png);}
.area-xb .a-taps .col5.c1 {background-image:url(../img/xb/n1.png);}
.area-xb .a-taps .col5.c2 {background-image:url(../img/xb/n2.png); }
.area-xb .a-taps .col5.c3 {background-image:url(../img/xb/n3.png);}
.area-xb .a-taps .col5.c4 {background-image:url(../img/xb/n4.png);}
.area-xb .a-taps .col5.c5 {background-image:url(../img/xb/n5.png);}
.area-ga .a-taps .col2.c1 {background-image:url(../img/ga/n1.png);}
.area-ga .a-taps .col2.c2 {background-image:url(../img/ga/n2.png); }

.textread1,.textread2 { display:block; left:0; right:0;  position:absolute; width:80%; margin:auto}
.textread1 { top:30%;width:60%;}
.textread2 { bottom:5%; height:150px; }

.road_cloud {
position: absolute;
left: 0;
right: 0;
top:10px;
background: url(../img/hb/cloud.png) no-repeat;
background-size: 1300px auto;
height: 128px;
z-index: 10;
-webkit-animation: a_cloud 15s linear infinite;
}

.a-map .maptip.animation-maptip {opacity:1}
.a-build .js.animation-js {opacity:1}

.animation-maptip {

	-webkit-animation: bounces 1.2s ease-out;
	-moz-animation: bounces 1.2s ease-out;
	-o-animation: bounces 1.2s ease-out;
	animation: bounces 1.2s ease-out;
	opacity:1
 }
.animation-rotate {
	-webkit-animation: rotate 20s infinite linear;
	-moz-animation: rotate 36s infinite linear;
	-o-animation: rotate 36s infinite linear;
	animation: rotate 36s infinite linear;
	opacity:1
 }
.animation-js {

	-webkit-animation: bounces-up 1.2s ease-out;
	-moz-animation: bounces-up 1.2s ease-out;
	-o-animation: bounces-up 1.2s ease-out;
	animation: bounces-up 1.2s ease-out;
	opacity:1
 }

.animation-scale {
	-webkit-animation: scalebig 1.2s ease-out;
	-moz-animation: scalebig 1.2s ease-out;
	-o-animation: scalebig 1.2s ease-out;
	animation: scalebig 1.2s ease-out;
 } 
 
.animation-movehand {
	-webkit-animation: movehand 2s infinite linear;
	-moz-animation: movehand 2s infinite linear;
	-o-animation: movehand 2s infinite linear;
	animation: movehand 2s infinite linear;
 } 
/*针对小屏做处理*/
@media screen and (max-height:420px) {
.home2,.home1 { width:80%;}
.home8 { bottom:100px}
.home7 { bottom:25px}
.home6 { bottom:30px}
 .a-build .js { display: none}
 .a-map {top:19%;} 
.area-db .a-map {top:20%;}
.a-taps {top:55%}
.area-hn .a-taps {top:65%}
.btn-group { top:20%}
.road_cloud { display:none}
.paihang .paitop{ width:50%; top:0}
.paihang .pailist { top:80px;}
.paihang .text { display:none}
}
 
@-webkit-keyframes bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0.0) }
  40% { -webkit-transform: scale(1.0) }
}
 
@keyframes bouncedelay {
  0%, 80%, 100% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 40% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}
@-webkit-keyframes a_cloud{0%{background-position:-654px 0;}100%{background-position:0 0;}}
@keyframes a_cloud{0%{background-position:-654px 0;}100%{background-position:0 0;}}

@keyframes bounces {  
0% {transform:translateY(-200%); -webkit-transform:translateY(-200%); opacity:0   }
10% {transform:translateY(-100%);-webkit-transform:translateY(-100%);  opacity:1  } 
20% { transform:translateY(0);-webkit-transform:translateY(0); padding-bottom: 5px;opacity:1  } 
40% {transform:translateY(-30%);-webkit-transform:translateY(-30%); opacity:1  }  
60% {transform:translateY(0%);-webkit-transform:translateY(0%);     padding-bottom: 6px;opacity:1  }     
}  
@-webkit-keyframes bounces {  
0% {transform:translateY(-200%); -webkit-transform:translateY(-200%); opacity:0   }
10% {transform:translateY(-100%);-webkit-transform:translateY(-100%);  opacity:1  } 
20% { transform:translateY(0);-webkit-transform:translateY(0); padding-bottom: 5px;opacity:1  } 
40% {transform:translateY(-30%);-webkit-transform:translateY(-30%); opacity:1  }  
60% {transform:translateY(0%);-webkit-transform:translateY(0%);     padding-bottom: 6px;opacity:1  }   
}  

@keyframes bounces-up {  
0% {transform:translateY(100%);-webkit-transform:translateY(100%);   opacity:0  } 
40% {transform:translateY(-3%);-webkit-transform:translateY(-3%); opacity:1   }
100% {transform:translateY(0%);-webkit-transform:translateY(0%);opacity:1   }
}  
@-webkit-keyframes bounces-up {  
0% {transform:translateY(100%);-webkit-transform:translateY(100%);   opacity:0  } 
40% {transform:translateY(-3%%);-webkit-transform:translateY(-3%); opacity:1}
100% {transform:translateY(0%);-webkit-transform:translateY(0%);opacity:1   }
}  
@keyframes scalebig {  
0%, 100% { transform: scale(1.0);-webkit-transform: scale(1.0); } 
50% {transform: scale(1.3);-webkit-transform: scale(1.3);}
}  
@-webkit-keyframes scalebig { 
0%, 100% { transform: scale(1.0);-webkit-transform: scale(1.0); } 
50% {transform: scale(1.3);-webkit-transform: scale(1.3);}
} 
  
@keyframes movehand {   
0%{ left:60%;opacity:0;} 
50% {left:50%; opacity:1;}
100% { left:40%;  opacity:0;} 
} 
@-webkit-keyframes movehand {  
0%{ left:60%;opacity:0;} 
50% {left:50%; opacity:1;}
100% { left:40%;  opacity:0;} 
} 
@keyframes rotate {
  from {transform:rotate(0deg);}
  to {transform:rotate(-360deg);}
}

@-webkit-keyframes rotate {
  from {-webkit-transform:rotate(0deg);}
  to {-webkit-transform:rotate(-360deg);}
} 
.hidecontent { display:none}